<template>
  <article class="project-card">
   <img class="project-card-img" :src=src alt="DormDesign" @click="handleClick">

   <div class="project-card-content">
      <div class="top-aligned">
        <div class="project-card-header">
          <h3>{{name}}</h3>
        </div>

        <div class="project-card-body">
          <p>{{desc}}</p>
        </div>
      </div>

      <div class="project-card-tags bottom-aligned">
        <div class="tag" v-for="(item,i) in tags" :key=i>{{item}}</div>
      </div>
    </div>
  </article>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['src', 'name', 'desc', 'link', 'tags'],
  methods: {
    handleClick() {
      window.open(this.link,"_blank");
    }
  },
}
</script>
